import React, { Fragment } from 'react'
import { StyleSheet, ScrollView } from 'react-native'
import PropTypes from 'prop-types'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import { ScaleS } from 'src/utils/ScreenUtil'
import JobCell from 'src/components/job-cell/index2'
import { getPostDetail, livePostList, cancelCollectionPost, collectionPost, blackPost } from 'src/utils/RequestAPI'
import NavigationUtil from 'src/utils/NavigationUtil'
import { showModal, showTipModal } from 'src/utils/ModalUtil'
import WhiteWrap from 'src/pageP/home/home-page/components/WhiteWrap'
import ThreeDotComponent from 'src/pageP/home/home-page/components/ThreeDotComponent'
import { CommonToast } from 'src/utils/ToastUtil'

export default class LivePost extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      livePostList: []
    }
  }

  render() {
    const { landmark } = this.props
    const { livePostList } = this.state
    return (
      <ScrollView
        style={[{ backgroundColor: '#fff' }]}
      >
        {livePostList.map((item, index) => {
          return (
            <CustomButton key={item.id} onPress={this._jobClick} params={{ item, index }}>
              <JobCell
                style={{ paddingTop: ScaleS(index === 0 ? 25 : 40) }}
                item={item}
                landmark={landmark}
                threeDotPress={this._threeDotPress}
                showAddressByCurrentLocation={false}
              />
            </CustomButton>
          )
        })}
      </ScrollView>
    )
  }
  _jobClick = ({ item, index }) => {
    const blockCallback = () => {
      this.livePostListRequest()
    }
    this.props.navigation.navigate('CJobdetail', {
      id: item.id,
      cityName: this.props.landmark.cityName,
      blockCallback,
      isLivePost: true,
      channelId: this.props.navigation.state.params.channelId
    })
  }
  componentDidMount() {
    this.livePostListRequest()
  }
  livePostListRequest = () => {
    const { companyId, userId } = this.props
    livePostList({ params: { companyId, userId, liveId: this.props.navigation.state.params.channelId } }).then(({ data: livePostList }) => {
      this.setState({
        livePostList
      })
    })
  }
  _threeDotPress = item => {
    getPostDetail({ params: { postId: item.id } }).then(data => {
      const jobDetail = data.data
      const { collectionId } = jobDetail
      this.dotArr = []
      // 没有举报
      this.dotArr.push({
        label: '举报',
        type: 0
      })
      if (collectionId) {
        // 已经收藏
        this.dotArr.push({
          label: '取消关注',
          type: 2,
          collectionId
        })
      } else {
        this.dotArr.push({
          label: '关注',
          type: 1
        })
      }
      this.dotArr.push({
        label: '不感兴趣',
        type: 3
      })
      this.threeDotPress(item)
    })
  }

  /**
   * 点击三个点的回调
   */
  threeDotPress = item => {
    this.showDotModal = showModal(this._threeDotModal(item))
  }

  _threeDotModal = params => {
    return (
      <WhiteWrap>
        <ThreeDotComponent
          dataArr={this.dotArr}
          params={params}
          itemClick={this._itemDotClick}
        />
      </WhiteWrap>
    )
  }

  _itemDotClick = ({ item, params }) => {
    this.showDotModal.close(() => {
      console.info('showDotModal', item, params)
      const { type } = item
      const { id: jobDetailId } = params
      switch (type) {
        case 0: // 举报
          NavigationUtil.navigateWithLogin({
            routeName: 'CompanyReport',
            navigateParams: {
              jobDetailId,
              onPress: this.livePostListRequest
            }
          })
          break
        case 1: // 关注，收藏
          this.collection(params).then(() => {
            CommonToast('关注成功')
          })
          break
        case 2: // 取消关注，收藏
          this.unCollection(item.collectionId).then(() => {
            CommonToast('取消关注成功')
          })
          break
        case 3: // 不感兴趣，屏蔽
          this._onBlockClick(jobDetailId)
          break
      }
    })
  }
  collection(params) {
    const { userId } = this.props
    return collectionPost({
      params: {
        postId: params.id,
        userId
      }
    })
  }

  unCollection(collectionId) {
    return cancelCollectionPost({
      params: {
        ids: collectionId.toString()
      }
    })
  }
  /**
 * 屏蔽
 * @private
 */
  _onBlockClick = (postId) => {
    if (NavigationUtil.jumpLogin()) {
      return
    }
    const onConfirm = () => {
      blackPost({ params: { postId } }).then(() => {
        // 屏蔽成功
        this.tipPrompModal.close(() => {
          this.livePostListRequest()
          this.tipPrompModal = null
        })
      })
    }
    this.tipPrompModal = showTipModal({
      titleText: '屏蔽提示',
      contentText: '是否要屏蔽该岗位？屏蔽后该岗位将不再显示',
      confirmText: '确定',
      onCancel: () => {
        this.tipPrompModal.close()
      },
      onConfirm
    })
  }
}

LivePost.propTypes = {
  companyId: PropTypes.any,
  landmark: PropTypes.object
}
